<script src="/lib/layui/xm-select.js"></script>

<div class="layui-fluid" style="padding: 25px;">
    <form class="layui-form" method="post" style="margin-top:20px" lay-filter="component-form-group" id="popdataadd">
        <input type="hidden" id="id" name="id" value="0" />
        <input type="hidden" id="filePath" name="filePath" value="" />

        <div class="layui-form-item" >
            <div class="layui-inline">
                <label class="layui-form-label">题名</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="name" name="name" placeholder="请输入题名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" >
            <div class="layui-inline">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="checkbox" name="display" lay-text="是|否" lay-skin="switch" checked required> 
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">链接地址</label>
                <div class="layui-input-inline" style="width: 620px;">
                    <input type="input" name="link" id="link" class="layui-input"> 
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <div id="dxfileshow" class="file-class">
                        <button type="button" class="layui-btn" id="upload-dx-expert">上传图片</button>
                        <input type="hidden" name="fileName" id="dxtxurl" value="" />
                        <div class="layui-upload-list">
                            <p id="upload-dxfile"></p>
                            <p id="test-upload-demodxText"></p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .test-file {
        margin: 0 5px 0 10px;
    }

    .file-class {
        margin-left: 80px;
        width: 500px;
    }
</style>

<script>

    var form = layui.form;
    var upload = layui.upload;
    form.render();
      
    //上传图片
    var uploaddxInst = upload.render({
        elem: '#upload-dx-expert'
        , accept: 'image'
        , acceptMime: 'image/*'
        , exts: 'jpg|png|gif|bmp|jpeg'
        , size: 0
        , number: 1
        , field: 'filePicture'
        , auto: false
        , choose: function (obj) {
            $("#upload-dxfile").empty();
            var files = this.files = obj.resetFile(); // 将每次选择的文件重置
            obj.preview(function (index, file, result) {
                var tr = $([' <label class="test-file"  id="test-upload-dx-file">' + file.name +
                    '</label><button class="layui-btn layui-btn-xs layui-btn-danger demodx-delete" onclick="DeletedxFiles()">删除</button>'].join(''));

                //删除
                tr.find('.demodx-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploaddxInst.config.elem.next()[0].value = '';
                });

                $("#upload-dxfile").append(tr);
                $("#dxtxurl").val(file.name);
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code < 0) {
                return layer.msg(res.msg);
            }
            layer.msg("文件上传成功");
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#test-upload-demodxText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demodx-reload">重试</a>');
            demoText.find('.demodx-reload').on('click', function () {
                uploaddxInst.upload();
            });
        }
    });


    //删除党校期刊的文件
    function DeletedxFiles() {
        $("#upload-dxfile").empty();
        $("#dxtxurl").val("");
    }


    //编辑
    function setCode(url) {
        form.render('select');
       
        if (url != "") {
            var tr = $(['<label class="test-file" id="test-upload-dx-file">' + url
                + '</label><button class="layui-btn layui-btn-xs layui-btn-danger demodx-delete" onclick="DeletedxFiles()">删除</button>'].join(''))
            $("#upload-dxfile").append(tr);
            $("#dxtxurl").val(url);
        }
    }
</script>